<template>
	<globalModal
		title="导入患者"
		:visible="visible"
		:width="500"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
	>
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<template v-if="false">
					<a-form-item label="所属医院" v-if="isAdmin">
						<a-input
							placeholder="请选择所属医院"
							v-decorator="[
								'deptId',
								{
									rules: [{ required: true, message: '请选择所属医院' }],
								},
							]"
							style="display: none"
							readOnly
						/>

						<span class="ant-input-group-wrapper">
							<span class="ant-input-wrapper ant-input-group">
								<input
									v-model="deptName"
									placeholder="请选择所属医院"
									type="text"
									readonly="true"
									class="ant-input"
								/>
								<span class="ant-input-group-addon"
									><a-icon
										@click="changeDept"
										slot="addonAfter"
										type="setting"
										style="cursor: pointer"
								/></span>
							</span>
						</span>
					</a-form-item>
					<a-form-item label="随访医生">
						<a-input
							placeholder="请选择随访医生"
							v-decorator="[
								'doctorId',
								{
									rules: [{ required: true, message: '请选择随访医生' }],
								},
							]"
							style="display: none"
							readOnly
						/>
						<span class="ant-input-group-wrapper">
							<span class="ant-input-wrapper ant-input-group">
								<input
									v-model="realName"
									placeholder="请选择随访医生"
									type="text"
									readonly="true"
									class="ant-input"
								/>
								<!-- <span class="ant-input-group-addon"
								><a-icon @click="changeDept" slot="addonAfter" type="setting" style="cursor: pointer"
							/></span> -->
							</span>
						</span>
					</a-form-item>
				</template>
				<a-form-item label="上传">
					<div class="flex flex-pack-justify flex-align-top">
						<div class="flex-1">
							<a-upload
								name="file"
								:beforeUpload="beforeUpload"
								:showUploadList="false"
								accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
								v-decorator="[
									'file',
									{
										rules: [{ required: true, message: '上传文件' }],
										valuePropName: 'file',
										getValueFromEvent: normFile,
									},
								]"
							>
								<a-button>
									<a-icon type="upload" />
									上传文件
								</a-button>
							</a-upload>
							<div>{{ filename }}</div>
						</div>
						<a
							style="margin-top: 4px"
							:href="'/template/patient-template.xlsx?time=' + new Date().getTime()"
							class="ant-btn ant-btn-primary"
							download="患者模板.xlsx"
						>
							<a-icon type="download" />
							<span>模板下载</span>
						</a>
					</div>
				</a-form-item>
			</a-form>
		</a-spin>
		<change-dept-modal ref="changeDeptModal" @selectDept="selectDept"></change-dept-modal>
	</globalModal>
</template>

<script>
import { postActionExport, doctorManageapi, postActionUpload, patientManageapi } from '@/api/index.js';
import changeDeptModal from '@/components/changeDeptModal.vue';
import { ModalMixins } from '@/mixins';
export default {
	name: 'importAccountModal',
	mixins: [ModalMixins],
	components: {
		changeDeptModal,
	},
	data() {
		return {
			labelCol: {
				xs: {
					span: 24,
				},
				sm: {
					span: 6,
				},
			},
			wrapperCol: {
				xs: {
					span: 24,
				},
				sm: {
					span: 15,
				},
			},
			filename: '',
			deptName: '',
			realName: '',
		};
	},
	methods: {
		show(record = {}) {
			this.mdl = Object.assign({}, record);
			console.log('this.mdl', this.mdl, record);
			this.visible = true;
			this.filename = '';
			this.deptName = this.mdl.deptName || '';
			this.realName = this.mdl.realName || '';
			//获取一些初始下拉数据
			this.getDefaultList && this.getDefaultList();
		},
		async getDefaultList() {
			this.$nextTick(() => {
				this.form.resetFields();
				if (this.mdl && Object.keys(this.mdl).length > 0) {
					this.form.setFieldsValue(this.$pick(Object.assign({}, this.mdl), 'deptId', 'doctorId'));
				}
			});
		},
		changeDept(value) {
			if (this.isAdmin && !this.globalOrgId) {
				this.$message.error('请先选择一个机构');
				return false;
			}
			this.$refs.changeDeptModal.show(this.globalOrgId);
		},
		async selectDept(dept) {
			this.deptName = dept.deptName;
			this.$nextTick(() => {
				this.form.setFieldsValue({
					deptId: dept.deptId,
				});
			});
		},
		beforeUpload(file) {
			return false;
		},
		normFile(e) {
			if (Array.isArray(e)) {
				return e;
			}
			this.filename = e.file.name;
			return e && e.file;
		},
		handleCancel() {
			this.visible = false;
			this.filename = '';
			this.form.resetFields();
		},
		//提交保存数据
		handleOk() {
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					this.confirmLoading = true;
					this.importFile(values);
				}
			});
		},
		importFile(values) {
			this.confirmLoading = true;
			const formData = new FormData();
			formData.append('file', values.file);
			/* if(this.isAdmin){
				formData.append('deptId', values.deptId);
			} */
			formData.append('orgId', this.globalOrgId);
			//formData.append('doctorId', values.doctorId);
			formData.append('doctorId', this.mdl.doctorId);
			
			postActionUpload(patientManageapi.patientUrl.upload, formData)
				.then((res) => {
					if (res.code == 1) {
						this.confirmLoading = false;
						this.$message.success('导入成功');
						this.$emit('ok');
						this.handleCancel();
					}
				})
				.finally(() => {
					this.confirmLoading = false;
				});
		},
	},
};
</script>

<style></style>
